<template>
  <div>
    <el-row :gutter="20">
      <el-col>
        <el-form ref="chooseGoodsSkuFormRef" :model="chooseGoodsSkuForm" :rules="chooseGoodsSkuFormRules" size="mini" style="width:100%;">
          <el-table
            :data="chooseGoodsSkuForm.skuList"
            :header-cell-style="{
              'background-color': '#f3f8fe',
              color: '#606266',
              height: '50px',
            }"
            highlight-current-row
            style="width: 100%;"
          >

            <el-table-column
              label="规格ID"
              width="80"
              align="center"
            >
              <template slot-scope="scope">
                <div>
                  <span v-if="scope.row.detail && scope.row.detail.product_id"> {{ scope.row.detail.product_id }}</span>
                  <span v-else>{{ scope.row.id }}</span>
                </div>
              </template>
            </el-table-column>
            <el-table-column
              prop="goods_id"
              label="商品ID"
              width="80"
              align="center"
            />
            <!-- <el-table-column
              v-if="display"
              prop="currentInventory"
              label="当前库存"
              width="100"
              align="center"
            />
            <el-table-column
              v-else
              prop="inventory"
              label="当前库存"
              width="100"
              align="center"
            />
            <el-table-column
              v-if="display"
              prop="currentRetail_price"
              label="当前售价"
              width="100"
              align="center"
            />
            <el-table-column
              v-else
              prop="retail_price"
              label="当前售价"
              width="100"
              align="center"
            /> -->
            <el-table-column
              label="第一天返回比例%"
              align="center"
            >

              <template slot-scope="scope">
                <el-form-item
                  v-if="scope.row.isUpdate"
                  :prop="'skuList.'+scope.$index+'.first_day_rate'"
                  :rules="chooseGoodsSkuFormRules.first_day_rate"
                >
                  <el-input-number
                    v-model="scope.row.first_day_rate"
                    style="width:100%"
                    size="mini"
                    :min="0"

                    :step="1"
                    :controls="true"
                    controls-position="both"
                  />
                </el-form-item>
                <div v-else>{{ scope.row.first_day_rate }}</div>

              </template>

            </el-table-column>

            <el-table-column
              label="第二天返回比例%"
              align="center"
            >
              <template slot-scope="scope">
                <el-form-item
                  v-if="scope.row.isUpdate"
                  :prop="'skuList.'+scope.$index+'.second_day_rate'"
                  :rules="chooseGoodsSkuFormRules.second_day_rate"
                >
                  <el-input-number
                    v-model="scope.row.second_day_rate"
                    style="width:100%"
                    size="mini"
                    :min="0"

                    :step="1"
                    :controls="true"
                    controls-position="both"
                  />

                </el-form-item>
                <div v-else>{{ scope.row.second_day_rate }}</div>
              </template>
            </el-table-column>

            <el-table-column
              label="第三天返回比例%"
              align="center"
            >
              <template slot-scope="scope">
                <el-form-item
                  v-if="scope.row.isUpdate"
                  :prop="'skuList.'+scope.$index+'.third_day_rate'"
                  :rules="chooseGoodsSkuFormRules.third_day_rate"
                >
                  <el-input-number
                    v-model="scope.row.third_day_rate"
                    style="width:100%"
                    size="mini"
                    :min="0"

                    :step="1"
                    :controls="true"
                    controls-position="both"
                  />
                </el-form-item>
                <div v-else>{{ scope.row.third_day_rate }}</div>

              </template>

            </el-table-column>
            <el-table-column
              label="操作"
              align="center"
            >
              <template slot-scope="scope">
                <div v-if="display">
                  <el-button v-if="scope.row.isUpdate" type="primary" style="margin-right:5px;" size="mini" @click="doUpdate(scope.row,scope.$index)">确定</el-button>
                  <el-button v-else type="warning" size="mini" style="margin-right:5px;" @click="goUpdate(scope.row)">修改</el-button>
                  <el-popconfirm
                    title="确定删除吗？"
                    @confirm="doDelete(scope.row)"
                  >
                    <el-button slot="reference" type="danger" size="mini">删除</el-button>
                  </el-popconfirm>
                </div>
                <div v-else>
                  <!-- <el-button type="default" size="mini" @click="doCancelCurrentSku(scope.row,scope.$index)">取消</el-button>
                  <el-button :key="scope.row.id" type="primary" :disabled="scope.row.isConfirm" size="mini" @click="doSaveCurrentSku(scope.row,scope.$index)">确定</el-button> -->
                  <el-button v-if="scope.row.isUpdate" type="primary" style="margin-right:5px;" size="mini" @click="doUpdate(scope.row,scope.$index)">确定</el-button>
                  <el-popconfirm
                    title="确定删除吗？"
                    @confirm="doDelete(scope.row)"
                  >
                    <el-button slot="reference" type="danger" size="mini">删除</el-button>
                  </el-popconfirm></div>

              </template>
            </el-table-column>
          </el-table>
        </el-form>
      </el-col>
    </el-row>

  </div>
</template>
<script>
export default {
  name: 'ChoosedAllReturnSkuComp',
  components: {},
  props: {
    list: {
      type: Array,
      default: () => {
        return []
      }
    },
    // 展示方式: true 展示 false 非展示
    display: {
      type: Boolean,
      default: false
    },
    isUpdate: {
      type: Boolean,
      default: false
    }
  },
  data() {
    const validatorRate = (rule, value, callback) => {
      if (value > 100) {
        console.log('执行了吗？。。。。')
        callback(new Error('最大值为100!'))
      } else if (value < 0) {
        callback(new Error('最小值为零'))
      } else {
        callback()
      }
    }
    return {
      chooseGoodsSkuForm: {
        skuList: this.list
      },
      chooseGoodsSkuFormRules: {
        first_day_rate: [
          { required: true, message: '请填写第一天返回比例', trigger: 'blur' },
          { required: true, validator: validatorRate, trigger: 'change' },
          { required: true, validator: validatorRate, trigger: 'blur' }
        ],
        second_day_rate: [
          { required: true, message: '请填写第二天返回比例', trigger: 'blur' },
          { required: true, validator: validatorRate, trigger: 'change' },
          { required: true, validator: validatorRate, trigger: 'blur' }
        ],
        third_day_rate: [
          { required: true, message: '请填写第三天返回比例', trigger: 'blur' },
          { required: true, validator: validatorRate, trigger: 'change' },
          { required: true, validator: validatorRate, trigger: 'blur' }
        ]
      },
      confirmGoodsSkuList: [] // 确定的秒杀商品列表
    }
  },
  onBeforeDestoryed() {
    console.log('onBeforeDestoryed...')
  },
  methods: {
    resetData() {
      this.chooseGoodsSkuForm.skuList = []
      this.confirmGoodsSkuList = []
    },
    refreshList(list) {
      this.chooseGoodsSkuForm.skuList = list
    },
    // 编辑的时候需要先给其赋值
    updateChhooseSkuFormList(list) {
      this.confirmGoodsSkuList = list
      console.log('执行了吗2', this.confirmGoodsSkuList)
    },
    // 单行表单校验方法
    // 【form】是需要校验的表单，就是表单中【ref】绑定的字段
    // 【index】是需要传入的行数，字段【scope.$index】
    validateField(form, index) {
      let result = true
      for (const item of this.$refs[form].fields) {
        if (item.prop.split('.')[1] === String(index)) {
          this.$refs[form].validateField(item.prop, err => {
            if (err !== '') {
              result = false
            }
          })
        }
        if (!result) break
      }
      return result
    },
    // 取消当前的秒杀商品规格
    doCancelCurrentSku(row, index) {
      row.isConfirm = false
      row.num = ''
      row.inventory1 = ''
      row.price = ''
      row.postage = ''
      this.confirmGoodsSkuList = this.confirmGoodsSkuList.filter(item => item.product_id !== row.id)
      this.$emit('currentchoose', this.confirmGoodsSkuList)
    },
    //
    // 保存当前的秒杀商品规格
    doSaveCurrentSku(row, index) {
      if (this.validateField('chooseGoodsSkuFormRef', index)) {
        const item = this.confirmGoodsSkuList.find(item => item.product_id === row.id)
        if (item) {
          this.$message.warning('该商品已经存在了')
          return
        }
        console.log('执行了吗？==>', this.confirmGoodsSkuList)
        const totalRate = Number(row.first_day_rate) + Number(row.second_day_rate) + Number(row.third_day_rate)
        if (totalRate !== 100) {
          this.$message.warning('三天返回比例综合不等于百分之百')
          return
        }
        // 校验通过
        this.confirmGoodsSkuList.push({
          product_id: row.id,
          goods_id: row.goods_id,
          first_day_rate: row.first_day_rate,
          second_day_rate: row.second_day_rate,
          third_day_rate: row.third_day_rate,
          isUpdate: row.isUpdate
        })
        row.isConfirm = true
        this.$emit('currentchoose', this.confirmGoodsSkuList)
      }
    },
    goUpdate(row) {
      row.isUpdate = true
    },
    // 确认修改已选秒杀规格
    doUpdate(row, index) {
      if (this.validateField('chooseGoodsSkuFormRef', index)) {
        // 校验通过
        const totalRate = Number(row.first_day_rate) + Number(row.second_day_rate) + Number(row.third_day_rate)
        if (totalRate !== 100) {
          this.$message.warning('三天返回比例综合不等于百分之百')
          return
        }
        this.$emit('updatelist', row)
        row.isUpdate = false
      }
    },
    doDelete(row) {
      this.$emit('deleteitem', row)
    }
  }
}
</script>
<style lang='scss' scoped>
</style>
